<template>
    <div id="home">
        <p class="title">{{ titleName }}</p>
        <p class="content">{{ countValue }}°</p>
    </div>
</template>

<script>
	export default {
		name: 'CloudInfoShowView',
		props: {
			titleName: {
				required: true,
				default: '',
				type: String
			},
			countValue: {
				required: true,
				default: 0.0,
				type: Number
			}
		}
	}
</script>

<style scoped lang="scss">

    #home {
        width: 90px;
        text-align: center;
        color: white;
        margin-top: 20px;
        font-size: 10px;

        p {
            margin-top: 0;
            padding-top: 0;
            margin-bottom: 0;
            padding-bottom: 3px;

            &.title {
                font-size: 12px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
            }

            &.content {
                font-size: 16px;
                font-family: PingFang SC;
                font-weight: 800;
                color: #FFFFFF;
            }

        }
    }
</style>
